Пункт меню в обводке со стрелочкой на неравномерной фоне

[Zverushka]

 

Суть в том, что эта обводка вместе со стрелкой на неоднородном заднем фоне. Вот как такое реализовать?( Я попробовала backgrond-size - но в итоге пропорции при определенных размеров сильно искажаются и это бросается в глаза...

Edited January 27, 2014 by Zverushka

[Анна]

Может сделать этот див с обводкой прозрачным-полупрозрачным, background-color: rgba(255,255,255,0.5) последний параметр регулирует прозрачность от 0 до 1

[rikimaru2013]

Если я правильно понял:

1) вырезаем с имеющего/делаем в PS такой же текст с рамочкой но на прозрачном фоне

2) под низ ставим div с border-radius: 50% и 

 

background-color: rgba(255,255,255,0.5) последний параметр регулирует прозрачность от 0 до 1

3) нашу картинку с 1 пунтка и div со 2 пунтка ставим в position:absolute, и оборачиваем их div с position:relative;

4) позиционируем где они должны вылезти с помощью top:10px; right:-15px; как-то так

[Zverushka]

Может сделать этот див с обводкой прозрачным-полупрозрачным, background-color: rgba(255,255,255,0.5) последний параметр регулирует прозрачность от 0 до 1

 

А куда деть стрелку?

 

Я кстати подумывала о clip:rect - еще с хмтл4 свойство... но по-моему оно не понимает процентов?

Сейчас я вижу это так - нарисовать обводку кроме нижней границы, а сверху 2 псевдослоя - слева и справа, обрезанные на 50% минус 3 пикселя слева и справа. Ну а для стрелки придеться просто добавить лишний слой. Но как сделать это "на 50% минус 3 пикселя".

Edited January 28, 2014 by Zverushka

[npofopr]

Я не много вас не понимаю.

И всегда выкладывайте в песочницу код http://jsfiddle.net/npofopr/PnqgC/ будет удобнее другим экспериментировать.

 

Задача же на много сложнее, чем кажется Хотя может нет.

Вам надо только саму кнопку? Или чтобы фон страницы и кнопки был одинаковым? 

[Zverushka]

Вот прямая ссылка на обводку, если кому может понадобиться http://i7.pixs.ru/storage/2/7/2/linkactive_6211644_10641272.png

Я не много вас не понимаю.

И всегда выкладывайте в песочницу код http://jsfiddle.net/npofopr/PnqgC/ будет удобнее другим экспериментировать.

 

Задача же на много сложнее, чем кажется Хотя может нет.

Вам надо только саму кнопку? Или чтобы фон страницы и кнопки был одинаковым? 

 

Фон кнопки прозрачный - в этом и проблема. Все, что у нас есть - контур со стрелкой внизу.

 

Вот заготовка для работы:

http://jsfiddle.net/6Dw9A/

Edited January 28, 2014 by Zverushka

[Анна]

Проблема в том, что она должна ресайзиться?

Может это поможет. Там сверху ярлычок css нажми он стили раскроет.

Еще обрати внимание там светлым написано"Position the pointer using persentages rather then pixels " там может птичка нужна будет.

Edited January 28, 2014 by Анна

[npofopr]

http://cssarrowplease.com/ тоже самое почти. Но это не выход. С не однородностью фона это не поможет.

Кнопка всегда должна, по хорошему, ресайзиться. Ведь не известно сколько в ней будет текста и какого он будет размера. А стрелка всегда должна быть в центре

[Анна]

  дошло, что Zverushka имела ввиду.

npofopr ресайзиться я имела ввиду адаптивную, а так в принципе ширина фиксированная под макс. длину текста.

Может, как идея сделать следующее: разделить картинку на четыре части(две боковушки, серединка с треугольником и серединка без треугольника), сделать из этого спрайтик, а потом через background несколько фонов друг за другом вставлять. Нужно будет длиннее добавить с двух сторон ещё по картинке "серединка без треугольника".

Это как идея.

[Bassline]

А так не сойдет? http://jsfiddle.net/CZdY3/1/ Правда уголок я криво нарисовал, да и браузер скругления рендерит не очень.

[Zverushka]

@Bassline,клевое решение! 

Еще подумала - все-таки ты гений!

Edited January 29, 2014 by Zverushka